<template>
  <ehl-dialog-box
    custom-class="_log_detail"
    :title="logdetail.title"
    :show="logdetail.show"
    :show-btn="false"
    @cancel="logdetail.show = false"
  >
    <ehl-form :options="logdetail.options" :data="logdetail.data">
      <template v-slot:label="{ data }">
        <div
          class="_log_detail_time"
          v-for="(item, index) in data.current.data"
          :key="index"
        >
          <span class="_log_detail_time_l">{{ `${item.modifyTime}：` }}</span>
          <span class="_log_detail_time_r" v-html="item.msg"></span>
        </div>
      </template>
    </ehl-form>
  </ehl-dialog-box>
</template>
<script>
  import Vue from 'vue'
  import superr from '@/common/components/superr.js'
  import ehlForm from '@/common'
  import { Component, Prop } from 'vue-property-decorator'

  export class LogDetail extends superr {
    title = '日志详情'
    show = false
    options = {
      label: {
        show: true,
        vertical: true, //表单label在上面不是左边
        type: 'label',
        style: {
          padding: '10px',
          border: '1px solid #c4d0dd',
          'border-radius': '4px',
          width: '100%',
        },
      },
      input: {
        show: false,
        vertical: true, //表单label在上面不是左边
        type: 'input',
        rows: 10,
        readonly: true,
      },
    }
    constructor(data) {
      super(data)
    }
  }

  @Component({
    components: {
      ehlForm,
      ehlDialogBox: () => $import('ehlDialogBox'),
    },
  })
  export default class LogDetailView extends Vue {
    @Prop({ type: Object }) logdetail
    mounted() {}
  }
</script>
<style lang="less" scoped>
  /deep/ ._log_detail {
    width: 50%;
    height: 70%;

    ._log_detail_time {
      display: flex;
      margin-bottom: 10px;

      ._log_detail_time_l {
        flex-shrink: 0;
      }

      ._log_detail_time_r {
        flex-grow: 1;
      }
    }
  }
</style>
